<template>
  <div>
    <headers></headers>
    <!--<carousel></carousel>-->
    <p class="banner padding88"><img :src="sliderImg" alt="" height="200px" width="100%"></p>
    <div class="divider ">
      <div class="auto">
        <router-link to="/">首页</router-link><span>></span>学分转换
      </div>
    </div>
      <div class="auto padding250">
        <!--<p class="title">学分转换</p>-->
        <div class="container">
          <img src="../../assets/pro.png" alt="">
          <div class="ceping_form">
            <Form ref="zhuanhuanForm2" :model="creditbank" :label-width="130" :rules="zhuanhuan2Rule">
              <FormItem label="证书编号 " prop="credentialNo">
                <Input v-model="creditbank.credentialNo" placeholder="请输入证件编号" :maxlength="30"/>
              </FormItem>
              <FormItem label="颁证日期 " prop="credentialTime">
                <DatePicker type="date" placeholder="请选择" :maxlength="30" :value="creditbank.credentialTime" @on-change="getCredentialTime"></DatePicker>
              </FormItem>
              <FormItem label="培训机构" prop="training">
                <Input v-model="creditbank.training" placeholder="请输入培训机构" :maxlength="30"/>
              </FormItem>
              <FormItem label="考试机构 " prop="examOrg">
                <Input v-model="creditbank.examOrg" placeholder="请输入考试机构" :maxlength="30"/>
              </FormItem>
              <FormItem label="有效期终止日期 " prop="deadline">
                <DatePicker type="date" placeholder="请输入有效期终止日期" :value="creditbank.deadline" @on-change="getDeadline" :maxlength="30"></DatePicker>
              </FormItem>
              <FormItem label="证书照片" prop="credentialImg">
                <div class="upload">
                  <Upload :format="['jpg','jpeg','png']" :show-upload-list="false" :headers="{Authorization:token}" action="/base/file/upload" :max-size="3072" :on-exceeded-size="handleMaxSize" :on-success="credentialImgSuccess" :on-format-error="formatError">
                    <p v-if="creditbank.credentialImg === ''"><img src="../../assets/zhengshu.png" alt="" width="187" height="84" ></p>
                    <p v-else><img :src="creditbank.credentialImg" alt="" width="226" height="134" ></p>
                  </Upload>
                </div>
                <div class="upload_tip">提示：上传图片最大尺寸800px，大小为3M以内</div>
              </FormItem>
              <FormItem>
                <Button class="nextbtn" @click="next">提交</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }



  .banner{
    height: 260px;
  }
  .divider{
    height: 53px;
    background-color: #fff;
    font-size: 14px;
    color: #957960;
    line-height: 53px;
    text-align: left;
    margin-bottom: 30px;
    box-shadow: 5px 1px 10px #ccc;
    a{
      color: #957960;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
    span{
      margin: 0 10px;
    }
  }

  form{
    width: 388px;
    margin:50px  0 0 50px ;
  }
  .upload_tip{
    text-align: left;
    color: #FF0000;
  }
  .ceping_form .ivu-date-picker{
    width: 258px;
  }
  .title{
    font-size: 24px;
    color: #000;
    margin: 20px 0 25px 0;
    text-align: left;
    padding: 15px 20px ;
    background-color: #fff;
  }
  .container{
    background-color: #fff;
    padding: 50px 0;
    .upload{
      cursor: pointer;
        p{
          width: 250px;
          height: 157px;
          border:1px solid #e1e1e1;
          padding:10px 5px;
          margin-bottom: 10px;
          img{
            object-fit: contain;
          }
        }
    }
    .nextbtn{
      background-color: #957960;
      height: 55px;
      width: 221px;
      font-size: 18px;
      color: #fff;
      margin-left:-15px;
    }
  }
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import carousel from '../template/carousel'
  import {getStore} from '../../storage'
  import {subCertif,scorePage,checkScore,centreInfoWeb,sliderPC} from '../../http'
    export default {
        name: '',
        props: {},
        data() {
            return {
              isSpinShow:false,
              token:getStore('token'),
              sliderImg:'',
              creditbank:{
                credentialImg:'',       //证书图片
                credentialNo:'',        //证书编号
                credentialTime:'',      //证书颁发日期
                training:'',            //培训机构
                examOrg:'',             //考试机构
                deadline:'',            //截止日期
              },
              zhuanhuan2Rule: {
                credentialNo: [
                  { required: true, message: '请输入证件编号', trigger: 'blur' }
                ],
              }
            };
        },
        methods: {
          //上传证件超出大小2M限制
          handleMaxSize (file) {
            this.$Notice.warning({
              title: '证件上传失败',
              desc: '您上传的图片超过3M，无法上传。'
            });
          },
          //获取颁证日期
          getCredentialTime(value){
            this.creditbank.credentialTime = value;
          },
          //获取终止日期
          getDeadline(value){
            this.creditbank.deadline = value;
          },
          //证书上传格式错误
          formatError(){
            this.$Notice.warning({
              title:"证件上传失败",
              desc:"图片格式错误，请上传图片",
              duration: 3,
            });
          },
          //上传证书图片
          credentialImgSuccess(response){
            if(response.code === 200){
              this.$set(this.creditbank,'credentialImg',response.data.fileUrl);
            }else{
              this.$Notice.warning({
                title:'证件上传失败',
                desc:'上传不成功，请重新上传',
                duration: 3,
              });
            }
          },
          next(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              this.$refs.zhuanhuanForm2.validate((valid) => {
                if (valid) {
                  subCertif({
                    credentialImg: this.creditbank.credentialImg,
                    credentialNo: this.creditbank.credentialNo,
                    credentialTime: this.creditbank.credentialTime,
                    training: this.creditbank.training,
                    examOrg: this.creditbank.examOrg,
                    deadline: this.creditbank.deadline
                  }).then(res => {
                    this.isSpinShow = false;
                    if (res.code === 200) {
                      this.$router.push({
                        name: 'changeScore'
                      })
                    } else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "学分转换提醒",
                        desc: res.info,
                        duration: 3,
                      })
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                }
              })
            }
          },
          getZhuanhuanData(){
            //获取封面图
            sliderPC({sliderType:'5'}).then(res =>{
              this.sliderImg = res.data.slider.sliderImg;
            }).catch()
            scorePage().then(res => {
              this.isSpinShow = false;
              this.creditbank = res.data.basic;
            }).catch()
          },
          getZhuanhuan2(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录，同时获取用户信息
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  checkScore().then(res => {
                    if (res.code === 200) {
                      if (res.data.isPass === 0 || res.data.isPass === 1) {
                        this.isSpinShow = false;
                        this.$router.push({
                          name: 'changeScore'
                        })
                      } else {
                        this.getZhuanhuanData();
                      }
                    } else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "学分转换提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: '登录提醒 ',
                    desc: '参与学分转换，需用户登录！ ',
                    duration: 3,
                  });
                  this.$router.push({
                    path: '/'
                  })
                }
              }).catch()
            }
          }
        },
        created() {
          // this.getZhuanhuan2()
          this.$router.push({
            name:'zhuanhuan'
          })
        },
      components: {
        headers,
        footers,
        carousel
      }
    }
</script>
